<template>
  <!--  <div class="avue-top" style="padding-left: 0">-->
  <!--&lt;!&ndash;    <div class="top-bar__left">&ndash;&gt;-->
  <!--&lt;!&ndash;      <div&ndash;&gt;-->
  <!--&lt;!&ndash;        class="avue-breadcrumb"&ndash;&gt;-->
  <!--&lt;!&ndash;        :class="[{ 'avue-breadcrumb&#45;&#45;active': isCollapse }]"&ndash;&gt;-->
  <!--&lt;!&ndash;        v-if="showCollapse"&ndash;&gt;-->
  <!--&lt;!&ndash;      >&ndash;&gt;-->
  <!--&lt;!&ndash;        <i class="icon-navicon" @click="setCollapse"></i>&ndash;&gt;-->
  <!--&lt;!&ndash;      </div>&ndash;&gt;-->
  <!--&lt;!&ndash;    </div>&ndash;&gt;-->
  <!--    <div class="top-bar__title">-->
  <!--      &lt;!&ndash; 页面跳转 &ndash;&gt;-->
  <!--      <div-->
  <!--        class="top-bar__item top-bar__item&#45;&#45;show"-->
  <!--        style="width: calc(100% - 345px)"-->
  <!--        v-if="showMenu"-->
  <!--      >-->
  <!--        <top-menu ref="topMenu"></top-menu>-->
  <!--      </div>-->
  <!--      &lt;!&ndash; 搜索 &ndash;&gt;-->
  <!--      &lt;!&ndash; <span class="top-bar__item"-->
  <!--            v-if="showSearch">-->
  <!--        <top-search></top-search>-->
  <!--      </span> &ndash;&gt;-->
  <!--    </div>-->
  <!--    <div class="top-bar__right">-->
  <!--&lt;!&ndash;      <el-tooltip content="讨论">&ndash;&gt;-->
  <!--&lt;!&ndash;        <div class="top-bar__item">&ndash;&gt;-->
  <!--&lt;!&ndash;          <router-link to="/bbsforum/forumhome"&ndash;&gt;-->
  <!--&lt;!&ndash;          ><i style="color: #fff; font-size: 18px; line-height: 40px">&ndash;&gt;-->
  <!--&lt;!&ndash;            <img&ndash;&gt;-->
  <!--&lt;!&ndash;              src="../../../styles/img/luntan.png"&ndash;&gt;-->
  <!--&lt;!&ndash;              style="vertical-align: middle; width: 25px; height: 25px"/></i&ndash;&gt;-->
  <!--&lt;!&ndash;          ></router-link>&ndash;&gt;-->
  <!--&lt;!&ndash;        </div>&ndash;&gt;-->
  <!--&lt;!&ndash;      </el-tooltip>&ndash;&gt;-->
  <!--&lt;!&ndash;      <el-tooltip&ndash;&gt;-->
  <!--&lt;!&ndash;        v-if="showColor"&ndash;&gt;-->
  <!--&lt;!&ndash;        effect="dark"&ndash;&gt;-->
  <!--&lt;!&ndash;        :content="$t('navbar.color')"&ndash;&gt;-->
  <!--&lt;!&ndash;        placement="bottom"&ndash;&gt;-->
  <!--&lt;!&ndash;      >&ndash;&gt;-->
  <!--&lt;!&ndash;        <div class="top-bar__item">&ndash;&gt;-->
  <!--&lt;!&ndash;          <top-color></top-color>&ndash;&gt;-->
  <!--&lt;!&ndash;        </div>&ndash;&gt;-->
  <!--&lt;!&ndash;      </el-tooltip>&ndash;&gt;-->
  <!--      <el-tooltip-->
  <!--        v-if="showDebug"-->
  <!--        effect="dark"-->
  <!--        :content="logsFlag ? $t('navbar.bug') : logsLen + $t('navbar.bugs')"-->
  <!--        placement="bottom"-->
  <!--      >-->
  <!--        <div class="top-bar__item">-->
  <!--          <top-logs></top-logs>-->
  <!--        </div>-->
  <!--      </el-tooltip>-->
  <!--      &lt;!&ndash; 锁屏 &ndash;&gt;-->
  <!--      <el-tooltip-->
  <!--        v-if="showLock"-->
  <!--        effect="dark"-->
  <!--        :content="$t('navbar.lock')"-->
  <!--        placement="bottom"-->
  <!--      >-->
  <!--        <div class="top-bar__item">-->
  <!--          <top-lock></top-lock>-->
  <!--        </div>-->
  <!--      </el-tooltip>-->
  <!--&lt;!&ndash;      <el-tooltip&ndash;&gt;-->
  <!--&lt;!&ndash;        v-if="showTheme"&ndash;&gt;-->
  <!--&lt;!&ndash;        effect="dark"&ndash;&gt;-->
  <!--&lt;!&ndash;        :content="$t('navbar.theme')"&ndash;&gt;-->
  <!--&lt;!&ndash;        placement="bottom"&ndash;&gt;-->
  <!--&lt;!&ndash;      >&ndash;&gt;-->
  <!--&lt;!&ndash;        <div class="top-bar__item top-bar__item&#45;&#45;show">&ndash;&gt;-->
  <!--&lt;!&ndash;          <top-theme></top-theme>&ndash;&gt;-->
  <!--&lt;!&ndash;        </div>&ndash;&gt;-->
  <!--&lt;!&ndash;      </el-tooltip>&ndash;&gt;-->
  <!--      &lt;!&ndash; 通知&ndash;&gt;-->
  <!--      <el-tooltip-->
  <!--        effect="dark"-->
  <!--        :content="$t('navbar.notice')"-->
  <!--        placement="bottom"-->
  <!--      >-->
  <!--        <el-badge :value="msgCount" class="top-bar__item top-bar__item&#45;&#45;show">-->
  <!--          <div>-->
  <!--            <top-notice></top-notice>-->
  <!--          </div>-->
  <!--        </el-badge>-->
  <!--      </el-tooltip>-->
  <!--      &lt;!&ndash; 通知&ndash;&gt;-->
  <!--      <el-tooltip-->
  <!--        effect="dark"-->
  <!--        :content="$t('navbar.language')"-->
  <!--        placement="bottom"-->
  <!--      >-->
  <!--        <div class="top-bar__item top-bar__item&#45;&#45;show">-->
  <!--          <top-lang></top-lang>-->
  <!--        </div>-->
  <!--      </el-tooltip>-->
  <!--      &lt;!&ndash;      中英文&ndash;&gt;-->
  <!--      &lt;!&ndash;      <el-tooltip&ndash;&gt;-->
  <!--      &lt;!&ndash;        v-if="showFullScren"&ndash;&gt;-->
  <!--      &lt;!&ndash;        effect="dark"&ndash;&gt;-->
  <!--      &lt;!&ndash;        :content="&ndash;&gt;-->
  <!--      &lt;!&ndash;          isFullScren ? $t('navbar.screenfullF') : $t('navbar.screenfull')&ndash;&gt;-->
  <!--      &lt;!&ndash;        "&ndash;&gt;-->
  <!--      &lt;!&ndash;        placement="bottom"&ndash;&gt;-->
  <!--      &lt;!&ndash;      >&ndash;&gt;-->
  <!--      &lt;!&ndash;        <div class="top-bar__item">&ndash;&gt;-->
  <!--      &lt;!&ndash;          <i&ndash;&gt;-->
  <!--      &lt;!&ndash;            :class="isFullScren ? 'icon-tuichuquanping' : 'icon-quanping'"&ndash;&gt;-->
  <!--      &lt;!&ndash;            @click="handleScreen"&ndash;&gt;-->
  <!--      &lt;!&ndash;          ></i>&ndash;&gt;-->
  <!--      &lt;!&ndash;        </div>&ndash;&gt;-->
  <!--      &lt;!&ndash;      </el-tooltip>&ndash;&gt;-->
  <!--      &lt;!&ndash;      中英文&ndash;&gt;-->
  <!--      &lt;!&ndash; <p>{{userInfo.name}}</p> &ndash;&gt;-->
  <!--      &lt;!&ndash; <img class="top-bar__img" :src="userInfo.avatar" alt="" /> &ndash;&gt;-->


  <!--      <el-dropdown>-->
  <!--        <el-image class="top-bar__img" :src="userInfo.avatar">-->
  <!--          <div-->
  <!--            slot="error"-->
  <!--            style="-->
  <!--            width: 100%;-->
  <!--            height: 100%;-->
  <!--            border-radius: 50%;-->
  <!--            box-sizeing: border-box;-->
  <!--            border: 0;-->
  <!--            display: block;-->
  <!--            margin: auto;-->
  <!--          "-->
  <!--          >-->
  <!--            <img-->
  <!--              style="-->
  <!--              width: 100%;-->
  <!--              height: 100%;-->
  <!--              border-radius: 50%;-->
  <!--              box-sizeing: border-box;-->
  <!--              border: 0;-->
  <!--              display: block;-->
  <!--              margin: auto;-->
  <!--            "-->
  <!--              :src="backImg"-->
  <!--            />-->
  <!--            &lt;!&ndash; <i :style="{'background':'url('+backImg+')','width': '28px', 'height': '28px','border-radius': '50%','box-sizing':'border-box'}"></i> &ndash;&gt;-->
  <!--          </div>-->
  <!--        </el-image>-->
  <!--        <span class="el-dropdown-link">-->
  <!--          {{ userInfo.name }}-->
  <!--&lt;!&ndash;          <i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>&ndash;&gt;-->
  <!--        </span>-->
  <!--        <el-dropdown-menu slot="dropdown">-->
  <!--          <el-dropdown-item>-->
  <!--            <router-link to="/">{{ $t("navbar.dashboard") }}</router-link>-->
  <!--          </el-dropdown-item>-->
  <!--          <el-dropdown-item>-->
  <!--            <router-link to="/info/index">{{-->
  <!--                $t("navbar.userinfo")-->
  <!--              }}-->
  <!--            </router-link>-->
  <!--          </el-dropdown-item>-->
  <!--          <el-dropdown-item @click.native="logout" divided-->
  <!--          >{{ $t("navbar.logOut") }}-->
  <!--          </el-dropdown-item>-->
  <!--        </el-dropdown-menu>-->
  <!--      </el-dropdown>-->
  <!--    </div>-->
  <!--  </div>-->

  <div class="navbar">
    <div class="title-group">
      <img src="../../../assets/navbar/logo.png" alt="">
      <span>信息工程大学洛阳校区教务管理系统</span>
    </div>
    <div class="tools-group">
      <span class="message">
        <img src="../../../assets/navbar/icon-message.png" alt="">
        <span class="message-count">2</span>
      </span>
      <span :class="toggleClass(index)" v-for="(item,index) in userRoleList" :key="index"
            @click="toggle(index)">{{ item.roleName }}</span>
      <!--      <span class="user-type"> </span>-->
      <span class="separation-line"></span>
      <el-dropdown class="navbar-dropdown">
        <span class="el-dropdown-link"><img src="../../../assets/user-photo.png" alt="">
          {{ userInfoNew.name }}
          <i class="el-icon-arrow-down el-icon--right"
             style="font-size: 25px;font-weight: bold;vertical-align: -3px;"></i></span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item><img src="../../../assets/navbar/icon-userinfo.png" alt=""> 个人信息</el-dropdown-item>
          <el-dropdown-item @click.native="logout"><img src="../../../assets/navbar/icon-change-useraccount.png" alt="">
            切换账号
          </el-dropdown-item>
          <el-dropdown-item @click.native="logout"><img src="../../../assets/navbar/icon-logout.png" alt=""> 退 出
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>
<script>
import {resetRouter} from "@/router/router";
import {mapGetters, mapState} from "vuex";
import {fullscreenToggel, listenfullscreen} from "@/util/util";
import topLock from "./top-lock";
import topMenu from "./top-menu";
//import topSearch from "./top-search";
//import topTheme from "./top-theme";
import topLogs from "./top-logs";
//import topColor from "./top-color";
import topNotice from "./top-notice";
import topLang from "./top-lang";
import TopMenu from "@/page/index/top/top-menu";
import {userRole} from "@/api/user";
//import {removeToken} from "@/util/auth";

export default {
  components: {
    TopMenu
    // topLock,
    // topMenu,
    // topSearch,
    // topTheme,
    // topLogs,
    // topColor,
    // topNotice,
    // topLang,
  },
  name: "top",
  data() {
    return {
      backImg: require("../../../../public/img/icon/015.jpg"),
      dic: [],
      form2: "",
      userRoleList: '',

    };
  },
  filters: {},
  created() {
  },

  computed: {
    ...mapState({
      showDebug: (state) => state.common.showDebug,
      showTheme: (state) => state.common.showTheme,
      showLock: (state) => state.common.showLock,
      showFullScren: (state) => state.common.showFullScren,
      showCollapse: (state) => state.common.showCollapse,
      showSearch: (state) => state.common.showSearch,
      showMenu: (state) => state.common.showMenu,
      showColor: (state) => state.common.showColor,
      msgCount: (state) => state.common.msgCount,
    }),
    ...mapGetters([
      "userInfo",
      "isFullScren",
      "tagWel",
      "tagList",
      "isCollapse",
      "tag",
      "logsLen",
      "logsFlag",
    ]),
    userInfoNew: function () {
      return {
        type: this.userInfo.role_name,
        name: this.userInfo.name
      }
    }
  },
  methods: {

    toggle(index) {
      let record = this.userInfo.role_id;
      let roleid=this.userRoleList[index].id
      if (roleid === record) {
        console.log()
      } else {

        if(roleid&&window.location.host){
          let sevice = "http://" + window.location.host + "/systemPages/chiefSpace";
          let serviceUrl = encodeURIComponent(sevice);
          let _url = window._CONFIG["ssoPrefixUrl"] + "/doSelectRole?roleId=" + roleid + "&redirect_url=" + serviceUrl;
          //一定要用这个方式退出清空cookie和一些缓存信息
          this.$store.dispatch("FedLogOut").then(() => {
            resetRouter();
            window.location.href = _url;
          });
        }

      }

    },
    toggleClass(index) {
      let record = this.userInfo.role_id;
      let role_id=this.userRoleList[index].id
      console.log(record,'record')
      if (role_id === record) {
        return "user-type";
      } else {
        return "user-major";
      }

    },
    getMenu() {
      this.$store.dispatch("GetTopMenu").then((res) => {
        this.items = res;
        this.$store.dispatch("GetTopMenuFirstLocal", window._CONFIG.topMenuId).then(() => {
          // let itemMenu = that.getItem(data);
          // let name = itemMenu.name;
          // let path = itemMenu.path;
          // 应该记录  最后跳转时的 tag, 此处tag存在 则跳转次tag不存在跳转 第一个
          // that.$router.push({
          //   path: that.$router.$avueRouter.getPath({ name: name, src: path }),
          //   // query:{
          //   //   id:item.id
          //   // }
          // });
        });
        // if (this.loginSu) {
        //   this.$router.push({
        //     path: that.$router.$avueRouter.getPath({
        //       name: "oa首页",
        //       src: "/systemPages/homepage",
        //     }),
        //   });
        // }
      });
    },
    userRole() {
      let _id = this.userInfo.user_id;
      userRole(_id).then((res) => {
        this.userRoleList = res.data.data;

        console.log(this.userRoleList, '_data')
      });
    },
    handleScreen() {
      fullscreenToggel();
    },
    setCollapse() {
      this.$store.commit("SET_COLLAPSE");
      console.log(this.isCollapse);
    },
    setScreen() {
      this.$store.commit("SET_FULLSCREN");
    },
    logout() {
      this.$confirm(this.$t("logoutTip"), this.$t("tip"), {
        confirmButtonText: this.$t("submitText"),
        cancelButtonText: this.$t("cancelText"),
        type: "warning",
      }).then(() => {
        this.$store.dispatch("FedLogOut").then(() => {
          resetRouter();
          let sevice = "http://" + window.location.host;// + "/systemPages/chiefSpace";
          let serviceUrl = encodeURIComponent(sevice);
          window.location.href = window._CONFIG.ssoPrefixUrl + "/logout?redirect_url=" + serviceUrl;
        });
      });
    },

  },
  mounted() {
    this.getMenu()
    listenfullscreen(this.setScreen);
    this.userRole()
  }
}
;
</script>

<style lang="less" scoped>
.navbar {
  height: 95px;
  padding: 0 30px;
  overflow: hidden;
  background: #004CA7;

  .title-group {
    float: left;
    margin-top: 17px;

    > img {
      width: 30px;
      height: 30px;
      vertical-align: -7px;
      margin-right: 10px;
    }

    > span {
      font-size: 20px;
      color: white;
      font-weight: bold;
    }
  }

  .tools-group {
    float: right;
    margin-top: 34px;

    .message {
      position: relative;

      > img {
        width: 19px;
        margin-right: 21px;
        vertical-align: -5px;
      }

      .message-count {
        display: inline-block;
        position: absolute;
        width: 14px;
        height: 14px;
        background: #FF2A2A;
        border-radius: 50%;
        color: white;
        font-size: 12px;
        right: 18px;
        text-align: center;
      }
    }

    .user-major {
      cursor: pointer;
      padding: 0px 5px;
      font-size: 18px;
      color: white;
      margin-right: 6px;
      font-weight: bold;
    }

    .user-type {
      padding: 0px 15px;
      display: inline-block;
      height: 24px;
      background: #FFFFFF;
      opacity: 1;
      border-radius: 12px;
      font-size: 18px;
      font-weight: 500;
      color: #004CA7;
      text-align: center;
      font-weight: bold;
    }

    .separation-line {
      width: 0;
      height: 17px;
      border: 2px solid #FFFFFF;
      opacity: 1;
      background: #FFFFFF;
      margin: 0 16px;
      border-radius: 5px;
    }

    .el-dropdown-link {
      font-weight: bold;

      > img {
        width: 20px;
        height: 20px;
        vertical-align: -4px;
        margin-right: 4px;
      }
    }
  }
}

.item {
  margin-top: 20px;
  margin-right: 10px;
}

/deep/ .top-bar__img .el-image__inner {
  border-radius: 50%;
}

.top-bar__item,
.el-dropdown-link {
  cursor: pointer;
}
</style>
